import React, { Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Card, Descriptions } from 'antd';

import PageHeader from '@/components/PageHeader';

const { Item } = Descriptions;
interface DetailProps {
  dispatch: Dispatch<any>;
  match: { params: { id: number } },
  loading: boolean;
  problemDetail: any;
}

@connect(({ logisCenterProblemDetail, loading }: any) => ({
  problemDetail: logisCenterProblemDetail,
  loading: loading.effects['logisCenterProblemDetail/fetch'],
}))

class FranchiseeDetail extends React.Component<DetailProps> {
  columns = [
    {
      title: '推送时间',
      dataIndex: 'time',
      width: 100,
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 80,
    },
    {
      title: '内容',
      dataIndex: 'desc',
      width: 120,
    },
  ];

  componentDidMount() {
    const { match: { params: { id } } } = this.props;
    this.fetchProblemDetail(id);
    this.fetchProblemRecord(id);
  }

  componentDidUpdate(prevProps: DetailProps) {
    const { match: { params: { id } } } = this.props;
    const oldId = prevProps.match.params.id;
    if (oldId !== id) {
      this.fetchProblemDetail(id);
      this.fetchProblemRecord(id);
    }
  }

  /**
   * 查询问题件详情
   */
  fetchProblemDetail = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logisCenterProblemDetail/fetch',
      payload: { id },
    });
  };

  /**
   * 查询问题件操作记录
   */
  fetchProblemRecord = (problemId: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logisCenterProblemDetail/record',
      payload: { problemId },
    });
  };

  render() {
    const { problemDetail: { data: problemInfo, records } } = this.props;

    return (
      <Fragment>
        <PageHeader />

        <Card bordered={false} title="订单详情" className="paddingB10">
          <Descriptions>
            <Item label="运单号">{problemInfo.expCode}</Item>
            <Item label="收件人手机">{problemInfo.consigneePhone}</Item>
            <Item label="入库时间">{problemInfo.inTime}</Item>
            <Item label="出库时间">{problemInfo.outTime}</Item>
            <Item label="订单状态">{problemInfo.orderStatusName}</Item>
            <Item label="问题类型">{problemInfo.problemTypeName}</Item>
            <Item label="快递公司">{problemInfo.expressName}</Item>
            <Item label="问题件状态">{problemInfo.statusName}</Item>
            <Item label="备注">{problemInfo.remark}</Item>
            <Item label="创建人">{problemInfo.createUser}</Item>
            <Item label="创建时间">{problemInfo.createTime}</Item>
            <Item label="操作人">{problemInfo.updateUser}</Item>
            <Item label="操作时间">{problemInfo.updateTime}</Item>
          </Descriptions>
        </Card>

        <Card bordered={false} title="问题件处理记录" className="paddingB10">
          {records.map((record: any) => (
            <div key={record.id} className="marginB8">
              {record.createTime}-{record.createUser}：{record.result}
            </div>
          ))}
        </Card>
      </Fragment>
    );
  }
}

export default FranchiseeDetail;
